<template>
  <div id="bankcardinformmations">
    <c-title :hide="false" text="账户信息"></c-title>
    <div class="card-info">
      <div class="card-list">
        <block v-for="(item, index) in list" :key="index">
          <div class="card-item flex" @click="goToEdit(item.id)">
            <div class="card-img">
              <block v-for="(iconItem,iconIndex) in iconList" :key="iconIndex">
                <img :src="`${imgPath}converge_pay/${iconItem.icon_cn_name}`" v-if="item.bankName== iconItem.bank_name"  />
              </block>
              <img :src="`${imgPath}converge_pay/bank.png`" v-if="item.bankName=='未知类型'" /> 
            </div>
            <div class="card-wrap">
              <h3>{{ item.bankName }}</h3>
              <div class="tag">{{ item.receiverAccountType == "201" ? "对私账户" : "对公账户"}}</div>
              <div>{{ item.receiverAccountNoEnc }}</div>
            </div>
          </div>
        </block>
        <div class="bank-btn">
          <div class="add flex-a-c flex-j-c" @click="goToAdd">
            <div class="add-icon"></div>
            <span>添加银行卡</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import bankcardinformation_controller from "./bankcardinformation_controller.js";
export default bankcardinformation_controller;
</script>
<style  lang="scss" rel="stylesheet/scss" scoped>
  #bankcardinformmations {
    .card-info {
      .card-list {
        margin:10px 12px 0 12px;
        padding:0 0 50px 0;
        .card-item {
          background-color: #fff;
          padding: 16px 0;
          box-shadow: inset 0px 0 5px 1px rgba(255,255,255,0.8);
          border-radius: 12px 12px 12px 12px;
          margin:0 0 10px 0;
          .card-img {
            padding:0 0px 0 15px;
            img {
              width: 24px;
              height: auto;
              display: block;
              max-width: 100%;
            }
          }
          .card-wrap {
            text-align: left;
            padding:0 0 0 12px;
            h3 {
              font-weight: 500;
              font-size: 16px;
              line-height: 16px;
              color: #00001C;
              padding:0 0 6px 0;
            }
            .tag {
              font-size: 13px;
              color: #6E6E79;
              padding:0 0 4px 0;
            }
          }
        }
      }
      .bank-btn {
        background: #FFFFFF;
        border-radius: 12px 12px 12px 12px;
        padding:18px 0;
        .add {
          font-weight: 500;
          font-size: 14px;
          color: #3B3B4A;
          .add-icon {
            width: 12px;
            height: 12px;
            position: relative;
            &::after {
              content:'';
              width: 12px;
              height: 2px;
              background: #AAAAB3;
              border-radius: 3px 3px 3px 3px;
              position: absolute;
              left:0;
              top:50%;
              transform: translate(0,-50%);
            }
            &::before {
              content:'';
              width: 2px;
              height: 12px;
              position: absolute;
              background: #AAAAB3;
              border-radius: 3px 3px 3px 3px;
              left:50%;
              top:50%;
              transform: translate(-50%,-50%);
            }
          }
          span {
            padding:0 0 0 5px;
          }
        }
      }
    }
  }
</style>
